<template>
	<view class="mode" v-show="show" @click.stop="isModeClose&&close()" catchtouchmove="true">
		<view class="card" :style="{width:width}" @click.stop>
			<view class="title">{{title}}</view>
			<view class="scroll-view center fw">
				<slot></slot>
			</view>
			<view v-if="showConfirm || showCancel" class="flex  center btns">
				<view v-if="showCancel" @click.stop="cancel" class="bodlef f1">
					{{cancelText}}
				</view>
				<view v-if="showConfirm" @click.stop="confirm" class="co-zhu  f1 ">{{confirmText}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	// @cancel 点击关闭回调
	// @confirm 点击确定回调
	// @close 点击取消回调
	export default {
		props: {
			show: { // 显示隐藏
				type: Boolean,
				default: false
			},
			showConfirm: { // 是否显示确认按钮
				type: Boolean,
				default: true,
			},
			showCancel: { // 是否显示取消按钮
				type: Boolean,
				default: true,
			},
			cancelText: { // 取消按钮文本
				type: String,
				default: '取消'
			},
			confirmText: { // 确认按钮文本
				type: String,
				default: '确认'
			},
			title: { // 标题
				type: String,
				default: '提示'
			},
			width: { // 宽度
				type: String,
				default: '80%'
			},
			isModeClose: { // 是否开启点击遮罩关闭
				type: Boolean,
				default: true
			}
		},
		name: "popup",
		methods: {
			cancel() { // 取消事件
				this.$emit('cancel')
			},
			confirm() { // 确认事件
				this.$emit('confirm')
			},
			close() { // 关闭事件
				this.$emit('close')
			},
		}
	}
</script>

<style scoped lang="scss">
	.bg-e9 {
		background-color: #E9E9E9;
	}

	.btns {
		margin-top: 20rpx;

		view {
			padding: 42rpx 0;
			flex: 1;
			// border-radius: 10rpx;
			border-top: 2px solid #E9E9E9;
		}

		.bodlef {
			border-right: #E9E9E9 4rpx solid;
		}

		view+view {
			// margin-left: 34rpx;
		}
	}

	.hid {
		opacity: 0;
		display: none;
	}

	.mode {
		z-index: 999;
		animation: opacity .5s infinite;
		position: fixed;
		inset: 0;
		background: rgba(0, 0, 0, 0.6);

		.card {
			padding: 30rpx 0rpx 0rpx 0rpx;
			background-color: #fff;
			border-radius: 20rpx;
			min-height: 20vh;
			box-sizing: border-box;
			max-height: 70vh;
			overflow-y: auto;
			display: flex;
			flex-direction: column;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);

			.close {
				--w: 40rpx;
				width: var(--w);
				height: var(--w);
				position: absolute;
				right: 0;
				top: 0;
				transform: translate(-50%, 50%);
			}

			.scroll-view {
				min-height: 6vh;
				box-sizing: border-box;
				flex: 1;
				overflow-y: auto;
				font-size: 30rpx;
				color: #1A1A1A;
			}

			.title {
				text-align: center;
				font-weight: bold;
				font-size: 32rpx;
				margin-bottom: 40rpx;
			}
		}
	}
</style>